<template>
  <el-card class="box-card">
    <div class="search-bar">
      <el-form :inline='true' :model='searchData' class="fl">
        <el-input style="display: none;"></el-input>
        <el-form-item label="工作站">
          <el-input v-model="searchData.stand" placeholder="请输入工作站" @keyup.enter.native="onSearch()"></el-input>
        </el-form-item>
        <el-form-item label="工位">
          <el-select v-model="searchData.station" >
            <el-option value="工位01" label="工位01"></el-option>
            <el-option value="工位02" label="工位02"></el-option>
            <el-option value="工位03" label="工位03"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
                  v-model="searchData.startdate"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
          -
          <el-date-picker
                  v-model="searchData.enddate"
                  type="datetime"
                  placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="fl">
        <el-button type="text" @click="handleReset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
      </div>
    </div>
    
    <div>
      <el-table v-loading.body="tableLoading" ref="singleTable" :data="tableData" border highlight-current-row style="width: 100%">
<!--        <el-table-column prop="id" width="80" label="工件编号">-->
<!--        </el-table-column>-->
        <el-table-column type="index" width="80" label="序号">
        </el-table-column>
        <el-table-column prop="create_time" label="日期" min-width="120">
        </el-table-column>
        <el-table-column prop="stand" min-width="150" label="工作站">
        </el-table-column>
        <el-table-column prop="station" min-width="150" label="工位">
        </el-table-column>
        <el-table-column prop="current_1" min-width="85" label="焊接电流1">
        </el-table-column>
        <el-table-column prop="current_2" min-width="85" label="焊接电流2">
        </el-table-column>
        <el-table-column prop="current_3" min-width="85" label="焊接电流3">
        </el-table-column>
        <el-table-column prop="current_4" min-width="85" label="焊接电流4">
        </el-table-column>
        <el-table-column prop="current_5" min-width="85" label="焊接电流5">
        </el-table-column>
        <el-table-column prop="current_6" min-width="85" label="焊接电流6">
        </el-table-column>
        <el-table-column prop="current_7" min-width="85" label="焊接电流7">
        </el-table-column>
        <el-table-column prop="current_8" min-width="85" label="焊接电流8">
        </el-table-column>
        <el-table-column prop="current_9" min-width="85" label="焊接电流9">
        </el-table-column>
        <el-table-column prop="current_10" min-width="85" label="焊接电流10">
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-bar">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
      </el-pagination>
    </div>

  </el-card>
</template>
<script>
export default {
  data () {
    return {
      // 日期详细时间
      dateTime: '',
      addForm: {},
      dialogAddgsVisible: false,
      currentPage: 1,
      totalRecord: 0,
      pageSize: 10,
      tableLoading: false,
      searchData: {
        stand: '',
        station: '',
        startdate: null,
        enddate: null
      },
      tableData: []
    }
  },
  created () {
    this.api.sysCurrent.getList({ page_size: this.pageSize, page: this.currentPage, 
        stand: '', 
        station: '', 
        start_time: null, 
        end_time: null  
      }).then((res) => {
      this.tableData = res.data.data
      this.totalRecord = res.data.count
    })
  },
  methods: {
    onSearch () {
      this.api.sysCurrent.search({ page_size: this.pageSize, page: this.currentPage, 
        stand: this.searchData.stand, 
        station: this.searchData.station, 
        start_time: this.searchData.startdate==null?null:this.rTime(this.searchData.startdate), 
        end_time: this.searchData.enddate==null?null:this.rTime(this.searchData.enddate)
      }).then((res) => {
        this.tableData = res.data.data
        this.totalRecord = res.data.count
      })
    },
    handleReset () {
      this.searchData = {
        stand: '',
        station: '',
        startdate: null,
        enddate: null
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.onSearch ()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.onSearch ()
    },
     rTime(date) {
    var json_date = new Date(date).toJSON();
    return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
    }
  }
}
</script>
<style lang="less">
.fr {
  float: right;
}
.fl {
  float: left;
}
.search-bar {
  overflow: hidden;
}
</style>

<style>
.tools-bar {
  margin-bottom: 20px;
}
</style>
